<template>
  <div>
    <a-form-model :model="form" ref="userProject">
      <a-form-model-item prop="projectIds">
        <a-transfer
          show-search
          :dataSource="projectList"
          v-model="form.projectIds"
          :listStyle="{width: '45%',height: '480px'}"
          :titles="['待分配项目', '已分配项目']"
          :render="item=>item.title"
          :target-keys="form.projectIds"
          @change="handleTransferChange"
          @search="handleSearch"
          filterable>
        </a-transfer>
      </a-form-model-item>
    </a-form-model>
  </div>
</template>

<script>
  import projectApi from '../../business/project/js/api'

  export default {
    name: 'userProject',
    components: {},
    data() {

      return {
        projectList: [],
        form: {
          userId: '',
          projectIds: []
        }
      }
    },
    methods: {
      setData(data) {
        if (data && data.userId) {
          this.form.userId = data.userId
          this.getProjectList(data.userId)
        }
      },
      handleSubmit() {
        this.$refs['userProject'].validate(valid => {
          if (valid) {
            this.http.post(this, {
              url: this.api.managerUser.setProject,
              data: {
                userId: this.form.userId,
                projectIds: this.form.projectIds.join(',')
              },
              success: function(me) {
                me.$emit('handleClose')
              }
            })
          } else {
            return false
          }
        })
      },
      getProjectList(userId) {
        this.http.get(this, {
          url: projectApi.project.getUserProjectList,
          data: {
            userId: userId
          },
          success: (me, data) => {
            data.projectList.map(item => {
              item.key = item.projectId
              item.title = item.projectName
            })
            me.projectList = data.projectList
            me.form.projectIds = data.projectIds
          }
        })
      },
      handleTransferChange(targetKeys, direction, moveKeys) {
        this.form.projectIds = targetKeys
      },
      handleSearch(dir, value) {
        console.log('search:', dir, value)
      }
    },
    mounted: function() {
    }
  }
</script>
